<template>
  <div class="time-wrapper">
    <div class="year-wrapper">
      <el-button style="border-radius: 0;margin-right: -1px"
                 icon="el-icon-d-arrow-left" size="mini"
                 @click="handleYear('1')"/>
      <el-date-picker
          v-model="year"
          type="year"
          @change="handleChange"
          :clearable="false"
          class="selectTime"
          value-format="yyyy"
          placeholder="年"/>
      <el-button style="border-radius: 0;margin-left: -1px" icon="el-icon-d-arrow-right" size="mini"
                 @click="handleYear('-1')"/>
    </div>
    <span class="line">-</span>
    <div class="month-wrapper">
      <el-button style="border-radius: 0;margin-right: -1px" icon="el-icon-d-arrow-left" size="mini"
                 @click="handleMonth('1')"/>
      <el-select v-model="month" placeholder="月份" class="selectTime" @change="handleChange">
        <el-option v-for="item in monthOptions" :key="item.value" :label="item.label" :value="item.value"/>
      </el-select>
      <el-button style="border-radius: 0;margin-left: -1px" icon="el-icon-d-arrow-right" size="mini"
                 @click="handleMonth('-1')"/>
    </div>
  </div>
</template>

<script>
import moment from "moment";

export default {
  name: "time-picker",
  data() {
    return {
      year: '',
      month: '',
      monthOptions: [
        {label: '全年', value: 99},
        {label: '01', value: 1},
        {label: '02', value: 2},
        {label: '03', value: 3},
        {label: '04', value: 4},
        {label: '05', value: 5},
        {label: '06', value: 6},
        {label: '07', value: 7},
        {label: '08', value: 8},
        {label: '09', value: 9},
        {label: '10', value: 10},
        {label: '11', value: 11},
        {label: '12', value: 12},
      ]
    }
  },
  created() {
    this.initTime()
  },
  methods: {
    initTime() {
      let time = moment().format("yyyy-MM")
      let result = time.split('-')
      this.year = result[0]
      this.month = Number(result[1])
      return this.getTime()
    },
    handleYear(type) {
      this.year = moment(this.year).subtract(type, 'year').format('YYYY')
      this.handleChange()
    },
    handleMonth(type) {
      if(this.month === 99) {
        return this.month = 1
      }
      let month = this._padZore(this.month)
      this.month = moment(month).subtract(type, 'month').format('MM')
      this.handleChange()
    },
    handleChange() {
      this.$emit('change', this.getTime())
    },
    getTime() {
      let allMoment = ''
      if(this.month === 99) {
        allMoment = this.monthOptions.slice(1).map(item => this._padZore(item.value)).join(',')
      }
      return {year: this.year, moment: this.month,allMoment:allMoment}
    },
    _padZore(data) {
      return data < 10 ? '0' + data : data
    }
  }
}
</script>

<style lang="less">
.time-wrapper {
  display: inline-block;
  margin: 0 14px;

  .year-wrapper {
    display: inline-block;
  }

  .line {
    padding: 0 6px;
    color: #878787;
  }

  .month-wrapper {
    display: inline-block;
  }

  .selectTime {
    width: 90px !important;
    border-radius: 0;

    input {
      border-radius: 0;
    }
  }
}
</style>
